<template>
  <div class="home-card">
    <div class="home-card-inner">
      <div class="user-info">
        <div class="user-avatar">
          <image-view
            :src="avatar"
            round
          />
        </div>
        <div class="user-name">{{nickName}}</div>
        <div class="shelf-num">书架共{{ data.num }}本好书</div>
        <div class="point"></div>
        <div class="shelf-text">特别精选</div>
        <div class="feedback" @click="onFeedBack">反馈</div>
      </div>
      <div class="book-info">
        <div class="book-wrap">
          <div class="book-item"
               v-for="(item,index) in bookList"
               :key="index"
               @click="onBookClick(item)"
          >
            <image-view
              :src="item.cover"></image-view>
          </div>
        </div>

        <div class="book-rack-wrap" @click="gotoShelf(data.userInfo)">
          <div class="book-rack">书架</div>
          <van-icon name="arrow" color="#828489" size="11px" class="arrow"/>
        </div>

      </div>

      <van-dialog id="van-dialog" />
    </div>
  </div>
</template>

<script>
  import ImageView from '../base/ImageView.vue';
  import Dialog from 'vant-weapp/dist/dialog/dialog'; //弹出框

  export default {
    data(){
      return {
        index : null,
      }
    },
    props: {
      data: {
        type: Object,
        default: null,
      },
      hasSign: {
        type: Boolean,
        default: false,
      },
      signDay: {
        type: Number,
        default: 0,
      },
    },
    computed:{
      avatar(){
        return (this.data && this.data.userInfo && this.data.userInfo.avatarUrl) || '';
      },
      nickName(){
        return (this.data && this.data.userInfo && this.data.userInfo.nickName) || '';
      },
      bookList() {
        return (this.data && this.data.bookList) || []
      }
    },
    components: {
      ImageView
    },
    mounted(){

    },
    methods: {
      gotoShelf(userInfo) {//跳转到书架列表
        this.$emit('gotoShelf',userInfo);
      },
      onBookClick(item) {//图书点击事件
        this.$emit('onBookClick',item);
      },
      sign() {//	签到事件

      },
      onFeedBack(){ //反馈事件
        Dialog.confirm({
          title: '标题',
          message: '弹窗内容'
        }).then(() => {
          // on confirm
        }).catch(() => {
          // on cancel
        });
      },
    },
  }
</script>

<style lang="less" scoped>
  .home-card {
    height: 179px;
    margin: 37px 5px 0 5px;
    background-image: linear-gradient(-90deg, #54575F 0%, #595B60 100%);
    border-radius: 15px;
    .home-card-inner {
      height: 100%;
      padding: 21px 17px 20px 20px;
      box-sizing: border-box;
      .user-info {
        position: relative;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #FFFFFF;
        .user-avatar {
          width: 20px;
          height: 20px;
        }
        .user-name {
          margin: 0 8.5px;
        }
        .shelf-num {
          color: #C9CACC;
        }
        .point {
          margin: 0 8px;
          width: 4px;
          height: 4px;
          background: #A2A2A2;
          border-radius: 50%;
        }
        .shelf-text {
          color: #C9CACC;
        }
        .feedback {
          position: absolute;
          right: 0;
          top: -1px;
          width: 44px;
          height: 23px;
          line-height: 23px;
          background: rgba(216, 216, 216, .3);
          border-radius: 200px 0 0 200px;
          color: #fff;
          text-align: center;
        }
      }
      .book-info {
        display: flex;
        align-items: center;
        margin-top: 16px;
        .book-wrap {
          display: flex;
          flex: 1;
          .book-item{
            width: 72px;
            height: 101px;
            margin-right: 20px;
          }
        }
        .book-rack-wrap {
          display: flex;
          align-items: center;
          width: 25px;
          .book-rack {
            width: 15px;
            height: 29px;
            font-size: 10.5px;
            color: #fff;
            opacity: .8;
            line-height: 16px;
          }
        }
      }
    }
  }
</style>
